<script setup lang="ts">
  const systemInfo = uni.getSystemInfoSync()
  // console.log(systemInfo)
</script>

<template>
  <scroll-view>
    <view class="index-page" :style="{ paddingTop: systemInfo?.statusBarHeight + 'px' }">
      <!-- 页面导航 -->
      <view class="page-navbar">优医</view>

      <!-- 搜索栏 -->
      <view class="search-bar">
        <input
          placeholder-class="input-placeholder"
          placeholder="搜一搜: 疾病/症状/医生/健康知识"
          class="input"
          type="text"
        />
        <view class="icon-search">
          <uni-icons size="22" color="#C3C3C5" type="search" />
        </view>
      </view>
      <!-- 快速入口 -->
      <view class="quick-entry">
        <navigator
          hover-class="none"
          url="/subpkg_consult/quickly/index?type=1"
          class="quick-entry-item"
        >
          <view class="">
            <image class="quick-entry-icon" src="/static/images/quick-entry-1.png" />
            <text class="label">问医生</text>
          </view>
          <text class="small">按科室查问医生</text>
        </navigator>
        <navigator
          hover-class="none"
          class="quick-entry-item"
          url="/subpkg_consult/quickly/index?type=2"
        >
          <view class="">
            <image class="quick-entry-icon" src="/static/images/quick-entry-2.png" />
            <text class="label">极速问诊</text>
          </view>
          <text class="small">20s医生极速回复</text>
        </navigator>
        <navigator
          hover-class="none"
          url="/subpkg_consult/quickly/index?type=3"
          class="quick-entry-item"
        >
          <view class="">
            <image class="quick-entry-icon" src="/static/images/quick-entry-3.png" />
            <text class="label">开药门诊</text>
          </view>
          <text class="small">线上买药更方便</text>
        </navigator>
      </view>
      <!-- 快速查看 -->
      <view class="quick-view">
        <navigator hover-class="none" url="/subpkg_medicine/order_list/index">
          <view class="quick-view-item">
            <image class="quick-view-icon" src="/static/images/quick-view-1.png" />
            <text class="label">药品订单</text>
          </view>
        </navigator>
        <navigator hover-class="none" url="/subpkg_archive/list/index">
          <view class="quick-view-item">
            <image class="quick-view-icon" src="/static/images/quick-view-2.png" />
            <text class="label">健康档案</text>
          </view>
        </navigator>
        <navigator hover-class="none">
          <view class="quick-view-item">
            <image class="quick-view-icon" src="/static/images/quick-view-3.png" />
            <text class="label">我的处方</text>
          </view>
        </navigator>
        <navigator hover-class="none">
          <view class="quick-view-item">
            <image class="quick-view-icon" src="/static/images/quick-view-4.png" />
            <text class="label">疾病查询</text>
          </view>
        </navigator>
      </view>
      <!-- 广告位 -->
      <view class="banner-placeholder">
        <swiper
          class="uni-swiper"
          indicator-dots
          indicator-color="#ffffff99"
          indicator-active-color="#fff"
          circular
        >
          <swiper-item>
            <navigator hover-class="none" class="navigator" url=" ">
              <image class="banner-image" src="/static/images/banner-1.png" />
            </navigator>
          </swiper-item>
          <swiper-item>
            <navigator hover-class="none" class="navigator" url=" ">
              <image class="banner-image" src="/static/images/banner-1.png" mode="aspectFill" />
            </navigator>
          </swiper-item>
        </swiper>
      </view>
      <!-- 标签页列表 -->
      <custom-tabs></custom-tabs>

      <!-- 列表 -->
      <view class="feed-list">
        <view class="feed-list-item" v-for="item in 10" :key="item">
          <view class="feed-meta">
            <image class="doctor-avatar" src="/static/uploads/doctor-avatar.jpg" />
            <view class="doctor-info">
              <text class="name">王医生</text>
              <text class="desc">积水潭 皮肤科 主任医师</text>
            </view>
            <button class="doctor-button" plain>+ 关注</button>
          </view>
          <view class="feed-topic">炎热夏季如何防晒？</view>
          <view class="feed-relation"># 儿童健康</view>
          <view class="feed-content">
            <view class="text">
              炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的
            </view>
            <view class="picture">
              <image mode="aspectFill" class="uni-image" src="/static/uploads/feed-1.jpeg" />
              <image mode="aspectFill" class="uni-image" src="/static/uploads/feed-2.jpeg" />
              <image mode="aspectFill" class="uni-image" src="/static/uploads/feed-3.jpeg" />
            </view>
          </view>
          <view class="feed-extra">
            <text>12 收藏</text>
            <text>120 评论</text>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<style lang="scss">
  @import './index.scss';
  /* #ifdef H5 */
  .index-page {
    background-position-y: -50px;
  }
  /* #endif */
</style>
